<nz-drawer [nzClosable]="true" [nzVisible]="resListVisible" [nzPlacement]="'left'" nzTitle="监控资源列表"
  (nzOnClose)="setResListVisible(false)" [nzWidth]="600">
  <st #st [loading]="loading" [data]="page.data" [columns]="columns" [(pi)]="page.page" [(ps)]="page.pageSize"
    [page]="page.pageConfig" [total]="page.totalCount" (change)="tableChange($event)" [scroll]="{ x: '380px' }">
    <ng-template st-row="siteName" let-c let-item let-index="index">
      <div class="site-name">{{ item.siteName }}</div>
    </ng-template>
    <ng-template st-row="function" let-c let-item let-index="index">
      <img *ngIf="item.hasMeteorologicalEnv" class="function-icon" src="assets/images/map/img-env.png" />
      <img *ngIf="!item.hasMeteorologicalEnv" class="function-icon" src="assets/images/map/img-env-disable.png" />

      <img *ngIf="item.hasLampControl" class="function-icon" src="assets/images/map/img-light-control.png" />
      <img *ngIf="!item.hasLampControl" class="function-icon" src="assets/images/map/img-light-control-disable.png" />
    </ng-template>
    <ng-template st-row="res" let-c let-item let-index="index">
      <ng-container></ng-container>
      <img *ngIf="item.wellCoverResources && item.wellCoverResources.length" class="res-icon"
        src="assets/images/map/icon-well-close.png" />

      <img *ngIf="item.batteryCabinets && item.batteryCabinets.length" class="res-icon"
        src="assets/images/map/icon-charge.png" />

      <img *ngIf="item.waterResources && item.waterResources.length" class="res-icon"
        src="assets/images/map/icon-water-res.png" />
    </ng-template>
  </st>
</nz-drawer>